import { useNavigate } from 'react-router-dom'
import { Button } from '@arco-design/web-react'
import { IconPlus } from '@arco-design/web-react/icon'
import NoteCard from '@renderer/components/NoteCard'
import { observer } from 'mobx-react'
import { useStore } from '@renderer/store'

function Home() {
  const navigate = useNavigate()
  const { noteStore } = useStore()

  const handleGoNote = () => {
    navigate('/note', { replace: true })
  }

  return <>
    <div className="page-wrapper">
      <Button type="primary" icon={<IconPlus />} onClick={handleGoNote}>
        Start a new note
      </Button>

      <div className="note-list">
        <h3 className="title">Recents</h3>
        {noteStore.noteList.length > 0 && noteStore.noteList.map(item => {
          return <div key={item.id} className="item"><NoteCard data={item} /></div>
        })}
      </div>
    </div>
  </>
}

export default observer(Home)
